<template>
  <div v-if="visible" class="error-handler">
    <el-alert
      :title="errorTitle"
      :description="errorMessage"
      :type="errorType"
      :closable="closable"
      show-icon
      @close="handleClose"
      class="error-alert"
    >
      <template #default>
        <div class="error-content">
          <div class="error-message">{{ errorMessage }}</div>
          <div v-if="showRetry" class="error-actions">
            <el-button
              type="primary"
              size="small"
              @click="handleRetry"
              :loading="retrying"
            >
              重试
            </el-button>
          </div>
        </div>
      </template>
    </el-alert>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElAlert, ElButton } from 'element-plus'

interface Props {
  /** 是否显示错误提示 */
  visible?: boolean
  /** 错误类型 */
  type?: 'network' | 'validation' | 'server' | 'unknown'
  /** 错误消息 */
  message?: string
  /** 是否可关闭 */
  closable?: boolean
  /** 是否显示重试按钮 */
  showRetry?: boolean
  /** 重试回调函数 */
  onRetry?: () => void | Promise<void>
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  type: 'unknown',
  message: '',
  closable: true,
  showRetry: false
})

const emit = defineEmits<{
  close: []
  retry: []
}>()

const retrying = ref(false)

// 计算属性
const errorType = computed(() => {
  switch (props.type) {
    case 'network':
      return 'error'
    case 'validation':
      return 'warning'
    case 'server':
      return 'error'
    default:
      return 'info'
  }
})

const errorTitle = computed(() => {
  switch (props.type) {
    case 'network':
      return '网络连接错误'
    case 'validation':
      return '输入验证错误'
    case 'server':
      return '服务器错误'
    default:
      return '操作失败'
  }
})

const errorMessage = computed(() => {
  if (props.message) {
    return props.message
  }
  
  switch (props.type) {
    case 'network':
      return '无法连接到服务器，请检查网络连接后重试'
    case 'validation':
      return '请检查输入的数据格式是否正确'
    case 'server':
      return '服务器暂时无法处理请求，请稍后重试'
    default:
      return '操作失败，请重试'
  }
})

// 事件处理
function handleClose() {
  emit('close')
}

async function handleRetry() {
  if (props.onRetry) {
    try {
      retrying.value = true
      await props.onRetry()
      emit('retry')
    } catch (error) {
      console.error('重试失败:', error)
    } finally {
      retrying.value = false
    }
  } else {
    emit('retry')
  }
}
</script>

<style scoped>
.error-handler {
  margin: 16px 0;
}

.error-alert {
  border-radius: 8px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
}

/* Element Plus 组件样式现在由 global.scss 统一管理 */

.error-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-message {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.error-actions {
  display: flex;
  gap: 8px;
}

/* Element Plus 按钮样式现在由 global.scss 统一管理 */
</style>